<template>
    <div id="demo" class="demo">
        <h1>示例</h1>
        <p> 修改的地方有main.js、router.js、 App.vue、 views/Demo.vue 。<br>
            过程：用UI库引入了一个别人写好的按钮，触发事件，请求接口，获取数据，渲染数据到子组件。
        </p>
        <el-button v-on:click="handleClick" type="primary">点击向后端发起请求</el-button>
        <h5>接口返回结果：{{ respText }}</h5>
    </div>
</template>

<script>
    export default {
        name: "Demo",
        data: function(){
            return {
                respText: ''
            }
        },
        methods: {
            handleClick: function(){
                console.log(11111);
                // http://127.0.0.1:5000/index
                // /api/index
                let _this = this;
                this.axios.get('/api/index', {
                    params: {
                        // kw: 'ip'
                    }
                }).then(function(resp){
                    console.log(resp);
                    console.log(resp.data, typeof resp);
                    console.log(resp.data.msg);
                    console.log(this); // undefined
                    // axios中this指向问题  https://www.cnblogs.com/lalalagq/p/9961762.html  新生命一个变量或用es6函数写法
                    console.log(_this);
                    _this.respText = resp.data.msg;
                })
                // .then((resp)=> {console.log(this)})
            }
        }
    }
</script>

<style type="css" scoped>
    .demo {
        background-color: lightblue;
    }
</style>